<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>PGJC比价专用小程序</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      background: #7ddcff;
      font-family: "PingFang SC", "Hiragino Sans GB", "Arial", "Helvetica Neue", "Helvetica", "STHeitiSC-Light", "Microsoft YaHei", "SimHei", "sans-serif";
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 500px;
      margin: 40px auto 0 auto;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
      padding: 32px 24px 24px 24px;
      text-align: center;
    }
    .logo-svg {
      width: 320px;
      max-width: 90vw;
      display: block;
      margin: 0 auto 10px auto;
    }
    h1 {
      color: #1976d2;
      font-family: "PingFang SC", "San Francisco", "Arial", "Helvetica Neue", "Helvetica", "STHeitiSC-Light", "Microsoft YaHei", "SimHei", "sans-serif";
      font-size: 2.1em;
      font-weight: bold;
      margin: 0 0 18px 0;
      letter-spacing: 0.1em;
      text-shadow: 1px 1px 0 #fff, 2px 2px 4px #aaa;
    }
    .input-group {
      display: flex;
      gap: 10px;
      margin-bottom: 18px;
      justify-content: center;
    }
    .input-group input {
      flex: 1;
      padding: 10px;
      font-size: 1em;
      border: 1px solid #b0bec5;
      border-radius: 6px;
      outline: none;
      transition: border 0.2s;
    }
    .input-group button {
      padding: 10px 18px;
      font-size: 1em;
      background: #1976d2;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .input-group button:hover {
      background: #1565c0;
    }
    .clear-btn {
      background: #e53935;
      margin-left: 10px;
    }
    .clear-btn:hover {
      background: #b71c1c;
    }
    .result-list {
      margin-top: 18px;
      text-align: left;
      padding: 0;
      list-style: none;
    }
    .result-item {
      background: #f1f8ff;
      border-radius: 8px;
      margin-bottom: 10px;
      padding: 14px 16px;
      font-size: 1.1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-left: 6px solid #1976d2;
      transition: background 0.2s, border 0.2s;
    }
    .result-item.lowest {
      background: #fffde7;
      border-left: 6px solid #ffb300;
      font-weight: bold;
      color: #d84315;
    }
    .footer {
      margin-top: 30px;
      font-size: 1.2em;
      font-family: "STKaiti", "KaiTi", serif;
      color: #111;
      letter-spacing: 0.5em;
      text-align: center;
      font-weight: bold;
      text-shadow: 1px 1px 0 #fff, 2px 2px 4px #aaa;
    }
    @media (max-width: 600px) {
      .container { padding: 12px 2vw 18px 2vw; }
      .logo-svg { width: 98vw; }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- SVG LOGO -->
    <svg class="logo-svg" viewBox="0 0 800 700" xmlns="http://www.w3.org/2000/svg">
      <rect width="800" height="700" fill="#7ddcff"/>
      <path d="M180,600 Q100,500 150,400 Q80,300 200,200 Q300,80 500,100 Q700,120 700,300 Q750,400 650,500 Q600,650 400,650 Q300,650 180,600Z"
            fill="#ff6b6b" stroke="#ff6b6b" stroke-width="4"/>
      <!-- 主要汉字（用系统字体模拟） -->
      <text x="220" y="320" font-size="90" font-family="STKaiti, KaiTi, serif" fill="#111" font-weight="bold">检</text>
      <text x="320" y="250" font-size="90" font-family="STKaiti, KaiTi, serif" fill="#111" font-weight="bold">枫</text>
      <text x="400" y="320" font-size="90" font-family="STKaiti, KaiTi, serif" fill="#111" font-weight="bold">源</text>
      <text x="350" y="400" font-size="90" font-family="STKaiti, KaiTi, serif" fill="#111" font-weight="bold">声</text>
      <!-- 剑图案（简化） -->
      <rect x="250" y="340" width="10" height="60" fill="#111"/>
      <polygon points="255,340 260,330 250,330" fill="#111"/>
      <!-- 山、树等装饰（简化） -->
      <polyline points="370,250 380,230 390,250" stroke="#111" stroke-width="4" fill="none"/>
      <polyline points="390,230 400,210 410,230" stroke="#111" stroke-width="4" fill="none"/>
      <rect x="340" y="180" width="6" height="30" fill="#111"/>
      <rect x="350" y="190" width="6" height="20" fill="#111"/>
      <!-- 红色印章 -->
      <rect x="600" y="500" width="60" height="60" fill="#e53935" rx="8"/>
      <text x="610" y="540" font-size="22" font-family="STKaiti, KaiTi, serif" fill="#fff" font-weight="bold">检源</text>
      <text x="610" y="565" font-size="22" font-family="STKaiti, KaiTi, serif" fill="#fff" font-weight="bold">声印</text>
    </svg>
    <h1>PGJC比价专用小程序</h1>
    <div class="input-group">
      <input id="titleInput" type="text" placeholder="请输入商品标题" />
      <button onclick="compare()">比价</button>
      <button class="clear-btn" onclick="clearAll()">清空</button>
    </div>
    <ul class="result-list" id="resultList"></ul>
    <div class="footer">厚德 为民 担当 自强</div>
  </div>
  <script>
    // 假数据
    const mockData = [
      { platform: "京东", price: 199, url: "https://jd.com" },
      { platform: "天猫", price: 189, url: "https://tmall.com" },
      { platform: "拼多多", price: 179, url: "https://pinduoduo.com" },
      { platform: "苏宁", price: 205, url: "https://suning.com" }
    ];

    function compare() {
      const input = document.getElementById('titleInput').value.trim();
      const resultList = document.getElementById('resultList');
      resultList.innerHTML = '';
      if (!input) {
        alert('请输入商品标题');
        return;
      }
      // 模拟比价，实际可替换为API请求
      const data = mockData
        .map(item => ({...item}))
        .sort((a, b) => a.price - b.price);
      const minPrice = data[0].price;
      data.forEach(item => {
        const li = document.createElement('li');
        li.className = 'result-item' + (item.price === minPrice ? ' lowest' : '');
        li.innerHTML = `
          <span>${item.platform}</span>
          <span>￥${item.price}</span>
          <a href="${item.url}" target="_blank" style="margin-left:12px;color:#1976d2;text-decoration:underline;">去购买</a>
        `;
        resultList.appendChild(li);
      });
    }

    function clearAll() {
      document.getElementById('titleInput').value = '';
      document.getElementById('resultList').innerHTML = '';
    }
  </script>
</body>
</html>